import React, { useEffect, useState } from "react";
import { TabBar } from "antd-mobile";
import { AppOutline, FolderOutline, UserOutline } from "antd-mobile-icons";
import { useNavigate, useLocation } from "react-router-dom";
import routes from "../../router/routes";
import "./index.scss";
function Tabbar() {
  const navigation = useNavigate();
  const location = useLocation();
  const [isShow, setShow] = useState(true);
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/store",
      title: "我的收藏",
      icon: <FolderOutline />,
    },
    {
      key: "/personal",
      title: "个人中心",
      icon: <UserOutline />,
    },
  ];
  useEffect(() => {
    const routeItem = routes.filter((item) => item.path === location.pathname);
    const { meta } = routeItem[0];

    if (meta && meta.isTbbar) {
      setShow(true);
    } else {
      setShow(false);
    }
  }, [location]);
  function routerActive(value) {
    navigation(value);
  }
  return (
    <>
      {isShow && (
        <TabBar
          defaultActiveKey={location.pathname}
          safeArea={true}
          activeKey={location.pathname}
          onChange={(value) => routerActive(value)}
        >
          {tabs.map((tab) => (
            <TabBar.Item key={tab.key} icon={tab.icon} title={tab.title} />
          ))}
        </TabBar>
      )}
    </>
  );
}

export default Tabbar;
